home *** CD-ROM | disk | FTP | other *** search
/ Enter 2002 March / EnterCD 3_2002.iso / Internet / WireFusion 2.1 Professional / Tutorial / WireFusion_2.1_tutorial.txt
Encoding:
Text File  |  2001-12-17  |  6.1 KB  |  198 lines
  1. 1.
  2.  
  3. Install WireFusion 2.1 tryout software from the cover CD. Copy the
  4. WireFusion_Lottery folder from the CD to your computer and ensure you have
  5. read/write permission on your files. Open Final_result.html. Use the mouse
  6. to scratch the shamrock designs or to rotate, zoom and pan the ticket.
  7.  
  8.  
  9. 2.
  10.  
  11. Open WireFusion. The interface consists of three viewports: Object Explorer,
  12. Script Area and Work Area.
  13.  
  14.  
  15. 3.
  16.  
  17. In a new and empty project, open the SCene Properties dialogue and set the 
  18. Stage dimensions: width 270 pixels and height 400 pixels.
  19.  
  20.  
  21. 4.
  22.  
  23. Under the Multimedia tab, insert an Image object to the Script Area. Rename
  24. the object to Ticket. To load a new image, double click Ticket > Change
  25. image, load ticket.gif. Properties for each graphics objects are set in the
  26. Target Area Properties dialogue, which is launched from the object menu.
  27.  
  28.  
  29. 5.
  30.  
  31. Open Ticket > Target Area Properties, click the "Set to stage dimension"
  32. button to make the Ticket Target Area stretch over the Stage. Unmark the
  33. "Activate" tickbox and mark the "Stamp background" tickbox instead - this
  34. will give better performance as this image will be static.
  35.  
  36.  
  37. 6.
  38.  
  39. We will cover the ticket result with a surface image, but we will not use an
  40. Image object for that; we will use a Sub-Scene object instead, because the 
  41. Sub-Scene has an Alpha Channel and the Image does not. Insert a Sub-Scene 
  42. object, also found under the Multimedia tab, and rename it to Scratch Area.
  43.  
  44.  
  45. 7.
  46.  
  47. Go to Scratch Area > Target Area Properties; change its position to x=25 and
  48. y=117, and its dimensions to width 222 and height 143. The bluish Sub-Scene
  49. Target Area should now cover the Ticket result area.
  50.  
  51.  
  52. 8.
  53.  
  54. In the Object Explorer, select Scratch Area > Scene. You will now see an empty
  55. Scene. Change its Stage dimension by clicking the Scene properties button.
  56. Change the dimension to the same as the Scratch area: width 222 and height 143.
  57.  
  58.  
  59. 9.
  60.  
  61. Insert an Image object, rename it to Surface and load the image surface.gif.
  62. Open Surface > Target Area Properties, click the "Set to stage dimension"
  63. button and select Hand from the Cursor menu.
  64.  
  65.  
  66. 10.
  67.  
  68. To erase the Surface image when we're scratching it, we need to draw or fill
  69. the Alpha Channels with black. Select Object Explorer > Scratch Area >
  70. Alpha Channels. You should now see the empty Alpha-Channels Scene. Change its Stage
  71. dimension by clicking the Scene properties button. Change it to the same
  72. dimension as the Scratch Area: width 222 and height 143.
  73.  
  74.  
  75. 11.
  76.  
  77. Insert an Image object, rename it to Scraper and load the image scraper.gif.
  78. Open Scraper > Target Area Properties, unmark the Activate tickbox.
  79.  
  80.  
  81. 12.
  82.  
  83. Open Scraper > PortManager. Export two inports (i.e. mark the tickboxes);
  84. Stamp background and Set Position. Rename "Target Area|Set Position" to
  85. "Scraper Position" before exporting.
  86.  
  87.  
  88. 13.
  89.  
  90. In the Object Explorer, select Scratch Area > Scene.  Open Surface >
  91. PortManager and export the outport Mouse Drag. Rename "Mouse Events|Mouse
  92. Drag" to "Mouse Position" before exporting.
  93.  
  94.  
  95. 14.
  96.  
  97. In the Object Explorer, select Scratch Area. Make a connection from the
  98. Scene object, Scene > Out Ports > Mouse Position, to the Alpha Channels
  99. object, Alpha Channels > In Ports > Scraper Position.
  100.  
  101.  
  102. 15.
  103. Make another connection from Scene > Out Ports > Mouse Position, 
  104. to Alpha Channels > In Ports > Stamp background.
  105.  
  106.  
  107. 16.
  108.  
  109. The first connection positions the Scraper image after the mouse position
  110. when dragging the mouse over the Surface. The second connection makes a
  111. stamp of the Scraper image in the background every time it's repositioned,
  112. i.e. these connections let you draw with the Scraper image in the Alpha
  113. Channels.
  114.  
  115.  
  116. 17.
  117.  
  118. Press the green Play button to test your lottery ticket. Then save your
  119. project (File > Save As). Name it Lottery_2D.wfp.
  120.  
  121.  
  122. 18.
  123.  
  124. In 3ds max, create a simple 3D ticket with one texture at the back
  125. (back.gif) and another at the front (ticket.gif). We also add a Target Camera
  126. and a NavInfo, found under VRML Helpers. Set the NavInfo type to Examine and
  127. Speed to 40. If you don't have 3ds max or want to create the 3D model, then
  128. jump to step 20.
  129.  
  130.  
  131. 19.
  132.  
  133. To export the 3D ticket, choose File > Export, name it 3D_Lottery.wrl and
  134. save it as VRML97. Unmark all tickboxes in the VRML97 Exporter dialogue. Make
  135. sure to place the VRML file and the textures in the same folder.
  136.  
  137.  
  138. 20.
  139.  
  140. Go back to WireFusion and start a new project. Set the Stage dimension to
  141. width 300 pixels and height 300 pixels. Insert a 3D Scene object, found
  142. under the 3D tab. Load 3D_Lottery.wrl.
  143.  
  144.  
  145. 21.
  146.  
  147. Rename the 3D Scene object as 3D Lottery. Open 3D Lottery > Target Area
  148. Properties, click the "Set to stage dimension" button.
  149.  
  150.  
  151. 22.
  152.  
  153. Insert a Texture object, found under the 3D tab, and a System object, found
  154. under the Environment tab. Make a connection: from System 1 > Out Ports >
  155. First Frame Started, to Texture 1 > In Ports > Push Texture.
  156.  
  157.  
  158. 23.
  159.  
  160. Make a connection: from Texture > Out Ports > Texture Pushed, to 3D Lottery >
  161. In Ports > VRML Nodes > Front Transform > Shape > Appearance > ImageTexture
  162. > Image.
  163.  
  164.  
  165. 24.
  166.  
  167. In the Object Explorer, select Texture. Import your previously saved 2D
  168. lottery, Lottery_2D.wfp. Insert a System object and make a connection: from
  169. System 1 > Out Ports > First Frame Started, to Lottery_2D > In Ports > Push
  170. Scene.
  171.  
  172.  
  173. 25.
  174.  
  175. Make another connection: from Lottery_2D > Out Ports > Scene Pushed, to Texture > In
  176. Ports > Replace Scene. This will replace the 3D front texture with your
  177. interactive Lottery_2D presentation. Press the green Play button to test. To
  178. rotate, press Ctrl+Alt+Mouse. To zoom, press Ctrl+Mouse. To pan, press
  179. Alt+Mouse.
  180.  
  181.  
  182. 26.
  183.  
  184. Save your project, File > Save As. Name it Lottery_3D.wfp. Choose Project >
  185. Publish. Specify the Presentation name Lottery_3D and where to publish it.
  186. Press Finish.
  187.  
  188.  
  189. 27.
  190.  
  191. WireFusion automatically places the presentation within a HTML code. You can
  192. copy/paste it in your HTML editor. Make sure to have the Lottery_3D_codebase
  193. in the same folder as your HTML file. Upload everything to your server. 
  194. No extra plug-in is required to view the presentation, only a Java enabled browser.
  195.  
  196.  
  197.  
  198.